<template>
    <div class="about">
        <div class="about-header">
            <h1>关于我们</h1>
            <p class="subtitle">了解我们的故事和使命</p>
        </div>

        <div class="about-content">
            <section class="about-section">
                <h2>我们的故事</h2>
                <p>
                    简约博客创建于2023年，是一个致力于分享技术知识、设计灵感和职业发展的平台。我们相信简约而不简单的设计理念，希望通过清晰、易读的内容帮助读者获取有价值的信息。
                </p>
                <p>
                    从最初的几篇文章开始，我们不断成长，现在已经拥有了一个活跃的社区和丰富的内容库。我们的团队由热爱技术和写作的专业人士组成，他们在各自的领域都有丰富的经验。
                </p>
            </section>

            <section class="about-section">
                <h2>我们的使命</h2>
                <p>
                    我们的使命是通过高质量的内容，帮助开发者、设计师和其他技术从业者提升技能，跟上行业发展。我们致力于：
                </p>
                <ul class="mission-list">
                    <li>提供清晰、实用的技术教程和指南</li>
                    <li>分享行业最新趋势和最佳实践</li>
                    <li>建立一个支持学习和成长的社区</li>
                    <li>用简单的语言解释复杂的概念</li>
                </ul>
            </section>

            <section class="team-section">
                <h2>我们的团队</h2>
                <div class="team-grid">
                    <div class="team-member">
                        <div
                            class="member-avatar"
                            style="
                                background-image: url('https://picsum.photos/id/1001/300/300');
                            "
                        ></div>
                        <h3>张明</h3>
                        <p class="member-role">创始人 & 技术总监</p>
                        <p class="member-bio">
                            前端开发专家，拥有10年Web开发经验，热爱分享技术知识。
                        </p>
                    </div>
                    <div class="team-member">
                        <div
                            class="member-avatar"
                            style="
                                background-image: url('https://picsum.photos/id/1002/300/300');
                            "
                        ></div>
                        <h3>李华</h3>
                        <p class="member-role">内容编辑</p>
                        <p class="member-bio">
                            资深技术作家，擅长将复杂概念转化为易懂的文章。
                        </p>
                    </div>
                    <div class="team-member">
                        <div
                            class="member-avatar"
                            style="
                                background-image: url('https://picsum.photos/id/1003/300/300');
                            "
                        ></div>
                        <h3>王芳</h3>
                        <p class="member-role">UI/UX设计师</p>
                        <p class="member-bio">
                            有创意的设计师，负责博客的视觉设计和用户体验。
                        </p>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup></script>

<style scoped>
.about {
    padding-bottom: 60px;
}

.about-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #3498db;
}

.subtitle {
    font-size: 1.2rem;
    color: #777;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-section {
    margin-bottom: 50px;
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.about-section h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #2c3e50;
    position: relative;
    padding-bottom: 10px;
}

.about-section h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #3498db;
}

.about-section p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: #555;
}

.mission-list {
    padding-left: 20px;
}

.mission-list li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #555;
}

.team-section {
    margin-bottom: 50px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.team-member {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.member-avatar {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.team-member h3 {
    margin: 15px 15px 5px;
    font-size: 1.3rem;
}

.member-role {
    color: #3498db;
    font-weight: 500;
    margin: 0 15px 10px;
    font-size: 0.9rem;
}

.member-bio {
    padding: 0 15px 20px;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}
</style>
